<template>
  <div class="class_collapse">
    <div class="collapse_header" @click="contentVisible = !contentVisible">
      <div class="header_text">
        <i :class="['iconfont', contentVisible ? 'icon-xiajiantou': 'icon-youxia', 'collapse_icon']"></i>
        <i :class="['iconfont', 'collapse_icon', data.icon]"></i>
        <div class="header_title">{{ data.name }}</div>
      </div>
      <div class="header_button" @click.stop="handleEditClass(data)">
        <i class="iconfont icon-zhankai collapse_icon"></i>
      </div>
    </div>
    <div class="collapse_content" v-if="contentVisible">
      <div class="collapse_item" v-for="(item, index) in data.children" :key="'collapse' + index" @click="handleEditClass(item)">
        <i :class="['iconfont', item.icon]"></i>
        <div class="collapse_item_title">{{ item.name }}</div>
      </div>
      <div class="collapse_item" @click="handleAddSmallClass">
        <i class="iconfont icon-jia"></i>
        <div class="collapse_item_title" @click="handleGoNewClass">新增</div>
      </div>
    </div>
    <van-overlay :show="editVisible" @click="editVisible = false">
      <div class="operate_sheet" @click.stop>
        <span class="operate_sheet_item" v-for="(item, index) in editData" :key="'edit' + index" @click="handleEditOperate(item)">{{ item }}</span>
      </div>
    </van-overlay>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { useRouter } from 'vue-router';
export default defineComponent({
    props: {
        data: {
            type: Object,
            required: true
        }
    },
    setup(props) {
      const router = useRouter()
        const contentVisible = ref(false);
        const smallClassVisible = ref(false)
        const editVisible = ref(false)
        const editData = ['编辑', '统计', '分类隐藏', '账单查看', '账单转移']
        const editClassId = ref(-1)
        const editIsSub = ref(false)
        const handleAddSmallClass = () => {
            console.log("新增");
        };
        const handleGoReturn = () => {
          smallClassVisible.value = false
        }
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        const handleEditClass = (data: any) => {
          if(data.fromId) {
            editIsSub.value = true
          }
          editClassId.value = data.id
          editVisible.value = true
        }
        const handleEditOperate = (item: string) => {
          switch (item) {
            case '编辑':
              router.push({
                path: '/newClass',
                query: {
                  sub: Number(editIsSub.value),
                  isEdit: '1',
                  id: editClassId.value,
                  name: props.data.name
                }
              })
              break;
            case '统计':
              console.log(item);
              break;
            case '分类隐藏':
              console.log(item);
              break;
            case '账单查看':
              console.log(item);
              break;
            case '账单转移':
              console.log(item);
              break;
            default:
              break;
          }
        }
        const handleGoNewClass = () => {
          router.push({
            path: '/newClass',
            query: {
              sub: '1',
              type: props.data.type,
              fromId: props.data.id,
              name: props.data.name
            }
          })
        }
        return {
            contentVisible,
            smallClassVisible,
            editVisible,
            editData,
            handleAddSmallClass,
            handleGoReturn,
            handleEditClass,
            handleEditOperate,
            handleGoNewClass
        };
    },
})
</script>

<style scoped>
  .collapse_header {
    display: flex;
    padding: 20px;
    justify-content: space-between;
    font-size: 18px;
  }
  .collapse_icon {
    color: #333;
    padding: 0 10px;
  }
  .header_title {
    color: #333;
    display: inline-block;
  }
  .collapse_content {
    display: flex;
    padding: 20px;
    background-color: rgba(203, 203, 203, 0.1);
    flex-wrap: wrap;
    font-size: 14px;
  }
  .collapse_content .iconfont {
    font-size: 18px;
    color: #F9C3C2;
  }
  .collapse_item_title {
    margin-top: 6px;
  }
  .collapse_item {
    width: 20%;
    margin-bottom: 10px;
    font-family: 'MainFont';
  }
  .operate_sheet {
    position: fixed;
    left: 0;
    right: 0;
    top: 20%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    margin: 0 20%;
    padding: 20px;
    border-radius: 12px;
    box-shadow: #f9c3c233 0px 0px 10px 4px;
  }
  .operate_sheet_item {
    text-align: left;
    height: 40px;
    line-height: 40px;
  }
</style>